<template>
	<view class="zuipageWrap uni-common-pb">
		<view class="J_head">
			<image src="/static/loginBg1.png" class="J_loginBg J_loginBg1"></image>
		</view>
		<view class="J_content">
			<view class="J_tit">医内物流</view>
			<view class="J_loginForm">
				<view class="uni-flex uni-row">
					<view class="J_label">
						<image src="/static/user.png" class="J_loginFormImg"></image>
					</view>
					<view class="J_des">
						<input name="username" placeholder="请输入用户名" v-model="username" class="zinput J_username"/>
					</view>
				</view>
				<view class="uni-flex uni-row">
					<view class="J_label">
						<image src="/static/password.png" class="J_loginFormImg"></image>
					</view>
					<view class="J_des">
						<input name="password" placeholder="请输入密码" v-model="password" class="zinput J_password" type="password"/>
					</view>
				</view>
				<view class="uni-flex uni-row J_rember">
					<checkbox-group @change="checkboxChange" class="zcheck">
						<checkbox value="cb" :checked="remeberFlag" color="#68c6bb"/>
					</checkbox-group>
					<text @click="toggleRember">记住密码</text>
				</view>
				<view class="uni-flex uni-row">
					<button class="zbtn J_sub" @click="goLogin">登 录</button>
				</view>
			</view>
		</view>
		<view class="J_foot">
			<image src="/static/loginBg2.png" class="J_loginBg J_loginBg2"></image>
		</view>
	</view>
</template>

<script>

import md5 from '@/util/md5.min.js';
import {zLogin} from '@/util/api';

import {
	mapState,mapGetters,mapMutations,mapActions
} from 'vuex'

export default {
	components: {},
	data() {
		return {
			username: '',
			password: '',
			remeberFlag: true
		}
	},
	onLoad() {
		let loginRember = uni.getStorageSync('loginRember');
		if(loginRember){
			loginRember = JSON.parse(loginRember);
			this.username = loginRember.username;
			this.password = loginRember.pwd;
			this.remeberFlag = true;
		}else{
			this.remeberFlag = false;
		}
	},
	methods: {
		...mapMutations(['w_setPid']),
		checkboxChange (e) {
			if(e.detail.value[0]){
				this.remeberFlag = true;
			}else{
				this.remeberFlag = false;
			}
		},
		toggleRember () {
			this.remeberFlag = !this.remeberFlag;
		},
		async goLogin () {
			let username = this.username+'',
				password = this.password+'';
			if(!username){
				this.zutil.ztip("请输入用户名");
				return false;
			}
			if(!password){
				this.zutil.ztip("请输入密码");
				return false;
			}
			let code = this.zutil.createUniqueString();
			let sign = md5(username+code+password);
			/* console.log(code);
			console.log(sign); */
			let tpl_param = {
			  username: username,
			  code: code,
			  sign: sign,
			  pwd: password,
			}
			uni.showLoading({title: '加载中', mask: true});
			let res = await zLogin(tpl_param);
			res = this.zutil.formatAxiosData(res);
			if(res.status == 0){
				if(this.remeberFlag){
					uni.setStorageSync('loginRember', JSON.stringify(tpl_param));
				}else{
					uni.removeStorageSync('loginRember');
				}
				console.log(res.data);
				this.w_setPid(res.data);
				
				this.zutil.ztip("登录成功，正在为您跳转...");
				uni.reLaunch({
					url: '/pages/index/index'
				});
			}else{
				this.zutil.zalert(res.description || '登录失败');
				this.zutil.zuiShaker();
			}
			uni.hideLoading();
		}
	}
}
</script>

<style scoped lang="scss">
.zuipageWrap {
	.J_loginBg, .J_loginFormImg {
		width: 100%;
    height: 100%;
	}
	.J_head {
		width: 100%;
    height: 200rpx;
	}
	.J_foot {
		width: 100%;
    height: 200rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
	}
	.J_content {
		.J_tit {
			font-size: 80rpx;
			color: #33c7c5;
			text-align: center;
			margin: 20rpx 0;
		}
		.J_loginForm {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;
			margin-top: 100rpx;
			.uni-row {
				margin-bottom: 40rpx;
				width: 70%;
				.J_label {
					width: 68rpx;
					.J_loginFormImg {
						
					}
				}
				.J_des {
					flex: 1;
					margin-left: 20rpx;
					.zinput {
						border-bottom: 2rpx solid #CACACA;
						height: 80rpx;
						line-height: 80rpx;
						min-height: 80rpx;
						padding-left: 30rpx;
						font-size: 34rpx;
					}
				}
				.zbtn {
					flex: 1;
					color: #68c6bb;
					border: 2rpx solid #68c6bb;
					border-radius: 120rpx;
					background: #fff;
					margin-top: 60rpx;
					
					&:active, &:focus {
						color: #fff;
						background: #68c6bb;
					}
				}
				
				&.J_rember {
					justify-content: flex-end;
					.zcheck {
						margin-right: 4px;
						width: auto;
					}
				}
			}
		}
	}
}
</style>
